<style lang="less" scoped>
    .tablepage {
        height: auto;
        width: 100%;
        .pagecontent{
            display: flex;
            align-items: center;
        }
    }
</style>
<template>
    <div class="tablepage">
        <el-table
            style="width: 100%"
            ref="mytable"
            :data="tabledata"
            size="small"
            :highlight-current-row="true"
            @current-change="onCurrentChange"
            border>
            <el-table-column v-for="(item, index) in columns"
                             :key="index"
                             :fixed="item.fixed ? item.fixed : false"
                             :label="item.title"
                             :width="item.width ? item.width : 'auto'"
                             :prop="item.key">
                <el-table-column v-if="item.children" v-for="(children, index) in item.children"
                                 :key="index"
                                 :fixed="children.fixed ? children.fixed : false"
                                 :label="children.title"
                                 :width="children.width ? children.width : 'auto'"
                                 :prop="children.key">
                    <el-table-column v-if="children.children" v-for="(children2, index) in children.children"
                                     :key="index"
                                     :fixed="children2.fixed ? children2.fixed : false"
                                     :label="children2.title"
                                     :width="children2.width ? children2.width : 'auto'"
                                     :prop="children2.key">
                        <el-table-column v-if="children2.children" v-for="(children3, index) in children2.children"
                                         :key="index"
                                         :fixed="children3.fixed ? children3.fixed : false"
                                         :label="children3.title"
                                         :width="children3.width ? children3.width : 'auto'"
                                         :prop="children3.key">
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
            </el-table-column>
            <slot name="elmtable"></slot>
        </el-table>
        <div class="pagecontent">
            <slot style="margin-bottom: 5px"></slot>
            <div style="flex-grow: 1"></div>
            <Page
                :total="total"
                :current="current"
                :page-size="pagesize"
                :page-size-opts="[12, 17, 30]"
                @on-change="onChange"
                @on-page-size-change="onPageSizeChange"
                show-sizer
                show-elevator
                show-total
                placement="top"
                style="text-align: right;margin-top: 10px;">
            </Page>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'tablepage',
        props: {
            columns: {
                type: Array,
                default: () => {
                    return []
                }
            },
            data: {
                type: Array,
                default: () => {
                    return []
                }
            },
            loading: {
                type: Boolean,
                default: false
            }
        },
        data () {
            return {
                current: 1,  //  当前页码
                pagesize: 12 //  每页条数
            };
        },
        computed: {
            total () {
                return this.data.length
            },
            tabledata () {  //  tab数据   计算属性
                let data = JSON.parse(JSON.stringify(this.data))  //  深度复制  不是对象引用
                let start = (this.current - 1) * this.pagesize
                let end = start + this.pagesize
                let tabledata = this._.slice(data, start, end)
                /*if (tabledata.length > 0) {
                    tabledata[0]._highlight = true
                    this.$emit('on-current-change', tabledata[0])
                }*/
                //  tabledata.length > 0 ? tabledata[0]._highlight = true : ''
                // this.$refs.mytable.setCurrentRow(tabledata[0])
                return tabledata
            }
        },
        methods: {
            onChange (current) {  //	页码改变的回调，返回改变后的页码
                this.current = current
            },
            onPageSizeChange (pagesize) {  // 切换每页条数时的回调，返回切换后的每页条数
                this.pagesize = pagesize
            },
            onCurrentChange (currentRow, oldCurrentRow) {  //  改变当前行时触发
                this.$emit('on-current-change', currentRow)
            }
        },
        components: {
        },
        activated: function () {   //  组件激活时调用
            let width = document.body.clientWidth
        },
        mounted: function () {
        }
    };
</script>
